<template>
  <d2-container>
    <page-header
      slot="header"
      @submit="handleSubmit"
      @add="add"
      @delAll="delAll"
      :ids="ids"
      ref="header"/>
    <page-main
      :table-data="table"
      :loading="loading"
      @edit="edit"
      @del="delJsonp"
      @changeSel="changeSel"/>
    <page-footer
      slot="footer"
      :current="page.pageCurrent"
      :size="page.pageSize"
      :total="page.pageTotal"
      @change="handlePaginationChange"/>
    <modal-form ref="ModalForm" :modalForm="rowForm" @save="save"/>
  </d2-container>
</template>

<script>
import { jsonpList, updateJsonp, createJsonp, delJsonp, delAll } from 'api/jsonp'
import { PageHeader, PageMain, PageFooter, ModalForm } from './componnets'
export default {
  // name 值和本页的 $route.name 一致才可以缓存页面
  name: 'jsonpList',
  components: { PageHeader, PageMain, PageFooter, ModalForm },
  data () {
    return {
      table: [],
      loading: false,
      searchForm: {},
      page: {
        pageCurrent: 1,
        pageSize: 10,
        pageTotal: 0
      },
      rowForm: {},
      ids: []
    }
  },
  methods: {
    changeSel (e) {
      this.ids = e
    },
    add () {
      this.rowForm = {}
      this.$refs.ModalForm.open()
    },
    edit (row) {
      this.rowForm = { ...row }
      this.$refs.ModalForm.open()
    },
    save (data) {
      if (data.id) {
        delete data.create_at
        delete data.update_at
        this.updateJsonp(data)
      } else {
        this.createJsonp(data)
      }
    },
    handlePaginationChange (val) {
      this.page = val
      // nextTick 只是为了优化示例中 notify 的显示
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit()
      })
    },
    handleSubmit (form) {
      this.searchForm = form || this.searchForm
      this.loading = true
      jsonpList({
        ...this.searchForm,
        pageCurrent: this.page.pageCurrent,
        pageSize: this.page.pageSize
      })
        .then(res => {
          console.log(res)
          this.loading = false
          this.table = res.data
          this.page.pageTotal = res.total
        })
        .catch(err => {
          this.loading = false
          console.log('err', err)
        })
    },
    createJsonp (data) {
      createJsonp(data).then(res => {
        this.handleSubmit()
      }).catch(err => {
        this.loading = false
        console.log('err', err)
      })
    },
    delJsonp (data) {
      delJsonp(data).then(res => {
        this.handleSubmit()
      }).catch(err => {
        this.loading = false
        console.log('err', err)
      })
    },
    updateJsonp (data) {
      updateJsonp(data).then(res => {
        this.handleSubmit()
      }).catch(err => {
        this.loading = false
        console.log('err', err)
      })
    },
    delAll () {
      let data = { id: this.ids.map(i => i.id) }
      delAll(data).then(res => {
        this.handleSubmit()
      }).catch(err => {
        this.loading = false
        console.log('err', err)
      })
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>
